<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>档口管理</el-breadcrumb-item>
      <el-breadcrumb-item>档口列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="7">
          <el-input placeholder="请输入档口名" v-model="queryInfo.query" clearable @clear="getterrylist" >
            <el-button slot="append" icon="el-icon-search" @click="fuzzyquery"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="adddialogVisible = true"
            >添加档口</el-button
          >
        </el-col>
      </el-row>
      <el-table :data="cachelist" border style="width: 100%">
        <el-table-column prop="s_id" label="档口编号" width="100%" align="center">
        </el-table-column>
        <el-table-column prop="s_name" label="档口名" width="150%" align="center">
        </el-table-column>
        <el-table-column prop="s_picture" label="档口图片" width="200%" align="center">
          <template slot-scope="scope"> 
            <img :src="scope.row.s_picture" width="60" height="50"/> 
          </template>
        </el-table-column>
        <el-table-column label="归属" width="200%" align="center">
          <template slot-scope="scope">
            <p>第{{ scope.row.s_place }}食堂</p>
          </template>
        </el-table-column>
        <el-table-column prop="s_consume" label="人均消费" width="150%" align="center">
        </el-table-column>
        <el-table-column prop="s_boss" label="老板" width="150%" align="center">
        </el-table-column>
        <el-table-column prop="s_phone" label="联系电话" align="center">
        </el-table-column>
        <el-table-column prop="name" label="操作" width="350%" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleEdit(scope.row.s_id)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.s_id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum"
          :page-sizes="[3, 4, 5, 6]"
          :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 添加档口对话框 -->
    <el-dialog title="添加档口" :visible.sync="adddialogVisible" width="50%" @close="addFormclose">
      <el-form :model="addForm" :rules="addrules" ref="addForm_rdf" label-width="80px">
        <el-row>
          <el-col :span="10">
            <el-form-item label="档口名" prop="s_name">
              <el-input v-model="addForm.s_name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="老板" prop="s_boss">
              <el-input v-model="addForm.s_boss"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="归属食堂" prop="s_place">
          <el-select v-model="addForm.s_place" placeholder="请选择">
            <el-option label="第一食堂" value="1"></el-option>
            <el-option label="第二食堂" value="2"></el-option>
            <el-option label="第三食堂" value="3"></el-option>
            <el-option label="第四食堂" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-row>
          <el-col :span="10">
            <el-form-item label="人均消费" prop="s_consume">
              <el-input  type="number" v-model="addForm.s_consume" :precision="2" :step="0.1" :min="0"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="联系电话" prop="s_phone">
              <el-input v-model="addForm.s_phone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="图片地址" prop="s_picture">
          <el-input v-model="addForm.s_picture"></el-input>
        </el-form-item>
        <el-form-item label="介绍" prop="s_introduce">
          <el-input type="textarea" v-model="addForm.s_introduce" ></el-input>
        </el-form-item>
      </el-form>
      <el-row :gutter="20">
        <el-col :span="6" :offset="7">
          <el-button @click="adddialogVisible = false">取 消</el-button>
        </el-col>
        <el-col :span="6" :offset="1">
          <el-button type="primary" @click="addtereitory(addForm)">确 定</el-button>
        </el-col>
      </el-row>
    </el-dialog>
    <!-- 修改档口对话框 -->
    <el-dialog title="修改档口" :visible.sync="editdialogVisible" width="50%" @close="editdialogclose">
      <el-form
        :model="editFrom"
        :rules="editFromrules"
        ref="editFromref"
        label-width="70px"
      >
        <el-form-item label="档口名">
          <el-input v-model="editFrom.s_name" disabled></el-input>
        </el-form-item>
        <el-form-item label="归属">
          <el-select v-model="editFrom.s_place">
            <el-option label="第一饭堂" value="1"></el-option>
            <el-option label="第二饭堂" value="2"></el-option>
            <el-option label="第三饭堂" value="3"></el-option>
            <el-option label="第四饭堂" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="人均消费" >
          <el-input v-model="editFrom.s_consume"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="username">
          <el-input v-model="editFrom.s_boss"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="telephone">
          <el-input v-model="editFrom.s_phone"></el-input>
        </el-form-item>
        <el-form-item label="介绍" prop="telephone">
          <el-input v-model="editFrom.s_introduce"></el-input>
        </el-form-item>
      </el-form>
      <el-row :gutter="20">
        <el-col :span="6" :offset="7">
          <el-button @click="editdialogVisible = false">取 消</el-button>
        </el-col>
        <el-col :span="6" :offset="1">
          <el-button type="primary" @click="editterritory(editFrom)">确 定</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    // 自定义手机号规则
    var checkMobile = (rule, value, callback) => {
      const regMobile = /^1[34578]\d{9}$/;
      if (regMobile.test(value)) {
        return callback();
      }
      // 返回一个错误提示
      callback(new Error("请输入合法的手机号码"));
    };
    return {
      queryInfo: {
        query:"",
        pagenum: 1,
        pagesize: 4,
      },
      total: 2,
      adddialogVisible: false,
      editdialogVisible: false,
      terrylist:[],
      cachelist:[],
      addForm: {
        s_name: "",
        s_place: "",
        s_boss: "",
        s_phone: "",
        s_consume:"",
        s_introduce:"",
        s_picture:""
      },
      addForm2:{},
      addrules: {
        s_name: [
          { required: true, message: "请输入档口名", trigger: "blur" },
          { min: 1, max: 10, message: "档口名的长度在1~10个字符之间", trigger: "blur" },
        ],
        s_boss: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 6, message: "姓名的长度在2~6个字符之间", trigger: "blur" },
        ],
        s_phone: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          { validator: checkMobile, trigger: "blur" },
        ],
        s_place: [
            { required: true, message: '请选择食堂归属', trigger: 'change' }
        ],
        s_picture:[
          { required: true, message: '请输入图片地址', trigger: "blur" }
        ],
        s_consume:[
          { required: true, message: '请输入人均消费', trigger: "blur" }
        ],
        s_introduce:[
          { required: true, message: '请输入菜品介绍', trigger: "blur" }
        ],
      },
      editFromrules: {
/*         username: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 6, message: "姓名的长度在2~6个字符之间", trigger: "blur" },
        ],
        telephone: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          { validator: checkMobile, trigger: "blur" },
        ], */
      },
      editFrom: {},
      editFrom2:{}
    };
  },
  //界面创建时的调用函数
  created(){
    this.getterrylist()
  },
  methods: {
    //模糊查询
    fuzzyquery(){
      // this.cachelist=[]
      this.terrylist=[]
      let fuzzy = this.queryInfo.query
      if(fuzzy == ""){
        this.getterrylist()
      }else{
        this.$http.get('http://localhost:8090/stall/findStallsByName?name='+fuzzy).then(response => {
            this.terrylist=response.data
            console.log(this.terrylist)
            this.total=this.terrylist.length
            this.pagingdisplay(this.total,this.queryInfo.pagenum,this.queryInfo.pagesize)
        }, response => {
            console.log("error");
        });
      }
    },
    
    //获取档口列表
    getterrylist(){
      this.$http.get('http://localhost:8090/stall/findStallAll').then(response => {
            this.terrylist=response.data
            this.total=this.terrylist.length
            this.pagingdisplay(this.total,this.queryInfo.pagenum,this.queryInfo.pagesize)
        }, response => {
            console.log("error");
        });
    },
    
    //分页显示函数
    pagingdisplay(total,pagenum,pagesize){
      this.cachelist=[]
      let p=(pagenum-1)*pagesize
      let o=pagenum*pagesize
      let j=0
      if(o<=this.total){
        for(let i=p;i<o;i++){
        this.cachelist[j]=this.terrylist[i]
        j++
        }
      }
      else{
        for(let i=p;i<this.total;i++){
        this.cachelist[j]=this.terrylist[i]
        j++
        }
      }
    },
    
    //编辑界面的显示数据导入
    handleEdit(id) {
      this.$http.get('http://localhost:8090/stall/selectStallById?id='+id).then(response => {
        this.editFrom = response.data;
        console.log(this.editFrom);
        this.editdialogVisible = true;
        }, response => {
            console.log("error");
        });
    },
    
    //每页显示条数
    handleSizeChange(newsize) {
      this.queryInfo.pagesize = newsize;
      this.queryInfo.pagenum = 1
      this.pagingdisplay(this.total,this.queryInfo.pagenum,this.queryInfo.pagesize)
    },
    
    //当前页变动
    handleCurrentChange(newnum) {
      this.queryInfo.pagenum = newnum;
      this.pagingdisplay(this.total,this.queryInfo.pagenum,this.queryInfo.pagesize)
    },
    
    //添加对话框关闭事件
    addFormclose() {
      this.$refs.addForm_rdf.resetFields();
    },
    
    //添加档口
    addtereitory(addForm) {
      this.$refs.addForm_rdf.validate((valid) => {
        if (!valid) return;
        //发起添加请求
        console.log(addForm)
        this.addForm2=addForm
        let string='s_name='+this.addForm2.s_name+'&s_place='+this.addForm2.s_place+'&s_boss='+this.addForm2.s_boss+'&s_phone='+this.addForm2.s_phone+'&s_consume='+this.addForm2.s_consume+'&s_introduce='+this.addForm2.s_introduce+'&s_picture='+this.addForm2.s_picture
        console.log(string)
        this.$http.post('http://localhost:8090/stall/insertStall?'+string).then(response => {
          console.log("可以")
          this.getterrylist()
          }, response => {
            console.log("error");
        });

        this.$message.success("添加档口成功！");
        this.adddialogVisible = false;
        this.getterrylist()
      });

    },

    //修改对话框关闭事件
    editdialogclose(){
      this.$refs.editFromref.resetFields()
    },
    
    //修改档口
    editterritory(data){
      this.$refs.editFromref.validate((valid) => {
        if (!valid) return;
        this.editFrom2 = data
        let string = 's_id='+this.editFrom2.s_id+'&s_boss='+this.editFrom2.s_boss+'&s_phone='+this.editFrom2.s_phone+'&s_consume='+this.editFrom2.s_consume+'&s_place='+this.editFrom2.s_place+'&s_introduce='+this.editFrom2.s_introduce
        //发起修改请求
        this.$http.post('http://localhost:8090/stall/upDateStallById?'+string).then(response => {
        console.log("可以")
        this.getterrylist()
        }, response => {
            console.log("error");
        });
        this.$message.success("修改档口成功！");
        this.editdialogVisible = false;
      });
    },

    //删除档口
    async handleDelete(id) {
       const confirmResult = await this.$confirm(
        '此操作将删除该档口, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      // 点击确定 返回值为：confirm
      // 点击取消 返回值为： cancel
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      console.log(id);
      this.$http.get('http://localhost:8090/stall/deleteStallById?id='+id).then(response => {
        this.$message.success('删除用户成功！')
        this.getterrylist()
        }, response => {
            console.log("error");
            this.$message.success('删除用户失败！')
        });
    },
  },
};
</script>

<style lang="less" scoped>
</style>